import React from 'react';
import { Input } from 'antd';
import { SendOutlined, StopOutlined } from '@ant-design/icons';

const { TextArea } = Input;

interface ChatInputProps {
  value: string;
  loading: boolean;
  onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
  onKeyPress: (e: React.KeyboardEvent) => void;
  onSend: () => void;
  onStop: () => void;
}

const ChatInput: React.FC<ChatInputProps> = ({
  value,
  loading,
  onChange,
  onKeyPress,
  onSend,
  onStop,
}) => {
  return (
    <div className="chat-input-container">
      <div className={`input-wrapper ${loading ? 'disabled' : ''}`}>
        <TextArea
          value={value}
          onChange={onChange}
          onKeyPress={onKeyPress}
          placeholder="输入消息，Shift+Enter换行，Enter发送"
          autoSize={{ minRows: 1, maxRows: 4 }}
          disabled={loading}
          className="chat-input"
        />
        <div className="input-actions">
          <div className="input-tools"></div>
          {loading ? (
            <button className="send-button" onClick={onStop}>
              <StopOutlined />
              停止
            </button>
          ) : (
            <button className="send-button" onClick={onSend} disabled={!value.trim()}>
              <SendOutlined />
              发送
            </button>
          )}
        </div>
      </div>
      <div className="input-hints">
        <div className="hint-item">
          <kbd>Enter</kbd> 发送
        </div>
        <span style={{ margin: '0 8px' }}>·</span>
        <div className="hint-item">
          <kbd>Shift</kbd> + <kbd>Enter</kbd> 换行
        </div>
      </div>
    </div>
  );
};

export default ChatInput;
